$(function () {
    initSqlStatementApi();
    //详情
    $(".api-box").on("click",".detail",function (event) {
        initApiFieldDetail(this);
    });
});

//初始化字段编辑弹框
function initApiFieldDetail(element) {
    var _this = $(element);
    var $table = _this.parents("table");
    var data =  $table.bootstrapTreeTable("getData");
    var index = _this.parents("tr").attr("dataid") -1;
    var row = data[index];
    BootstrapDialog.show({
        title : "详情",
        cssClass : "drawer right",
        url: "/pages/dms/sqlStatementFieldDetail.html",
        success : function(){
            $("#apiFieldData").data("apiFieldData",{index : index,field:row});
        }
    });
}

function initSqlStatementApi() {

    var loaded =  $('#navbar').bootstrapNavbar("loaded");
    $.ajax({
        url: "/dms/getById?id="+loaded.param.id,
        method: "post",
        dataType: "json",
        contentType: 'application/json',
        success: function (response) {
            for(var i = 0 ; i < response.parserResults.length ; i++){
                var data = response.parserResults[i];
                data.id = "/"+data.id.replace(/\./g,"/");
                renderMappedStatementAPI(data,i);
            }
        }
    });
}

function renderMappedStatementAPI(data,index) {
    var columns = [
        {
            field:"id" ,     title : "地址",
            formatter : function (value, data) {
                 return  "/"+value.replace(/\./g,"/");
             }
        },
        {
            field: "namespace" ,  title :  "空间"
        },
        {
            field: "shortId" ,title :  "编号",
            formatter : function (value, data) {
                return  "/"+value.replace(/\./g,"/");
            }
        },
        {
            field: "name" ,title :  "名称",
        },
        {
            field: "commandType" ,title :  "类型",
        },
        {
            field: "returnType" ,title :  "结果"
        },
    ];
    var html = [];
    var formId = 'apiDetail'+index;
    html.push("<div class='api-group'>");
    html.push("<form id='"+formId+"'  class=\"form-inline\">");
    for(var i = 0 ; i < columns.length ; i++){
        var column = columns[i];
        html.push("<div class=\"form-group col-sm-6\">");
        html.push("<label for=\"id\" class=\"col-sm-4 col-form-label\">"+column.title+"</label>");
        html.push("<div class=\"col-sm-8\">");
        html.push(" <input type=\"text\" name='"+column.field+"' readonly class=\"form-control-plaintext\">");
        html.push("</div>");
        html.push("</div>");
    }
    html.push("</form>");

    var tables = [
        {
            id : "inputParameterTable"+index,
            title : "入参",
            field : "inputParameter",
        },
        {
            id : "outputParameterTable"+index,
            title : "出参",
            field : "outputParameter",
        }
    ];
    //初始化入参、出参
    for(var item in tables){
        var table = tables[item];
        html.push("<div class=\"api-box-table\">");
        html.push("<h4>"+table.title+"</h4>");
        html.push("<table id=\""+table.id+"\" class=\"api-parameter\"></table>");
        html.push("</div>");
    }
    html.push("</div>");
    $(".api-box").append(html.join(""));

    //初始化数据
    $("#"+formId).deserializable(data);
    for(var i = 0 ;i < tables.length ; i++){
        initSingleParameterTable($("#"+tables[i].id)[0],data[tables[i].field]);
    }
}


function initSingleParameterTable(element,data) {
    $(element).bootstrapTreeTable({
        data :data,
        showColumns : false,
        showRefresh : false,
        width: "100%",
        columns :  [
            { field: "field", title : "参数", width:"25%" },
            { field: "name", title : "名称",align : "center"},
            { field: "mergeType", title : "类型",align : "center" ,formatter: function (value, row, index) {
                    var type = row.type ;
                    if(row.type){
                        type = row.genericType ?  row.type+"("+row.genericType+")" : type;
                    }else {
                        type = "";
                    }
                    return type;
                }},
            { field: "visible", title : "显示", align : "center",valign : "middle",formatter : function (value, row, index) {
                    return  value && !(value === "false") ? "是" : "否";
                }},
            { field: "required", title : "必填", align : "center",valign : "middle",formatter : function (value, row, index) {
                    return row.validator && row.validator.required && !(row.validator.required === "false") ? "是" : "否";
                }},
            { field: "remarks", title : "备注",align : "center"},
            { field: "operate", title : "操作",align : "center",valign : "middle",formatter : function (value, row, index) {
                    return "<button type='button' class='btn btn-link detail'>详情</button>";
                }},
        ]
    });
}